
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="数据源配置" class="dialog-container" width="680px" append-to-body @opened="dialogOpened">
    <el-table v-if="formData.type==='buildin'" :data="datasources" size="mini" max-height="500px" style="width: 100%">
      <el-table-column prop="name" label="数据源名称" align="left" header-align="left">
      </el-table-column>
      <el-table-column label="选择" width="150">
        <template slot-scope="{row, column}">
          <el-button type="text" size="small" @click="saveBuildin(row)">
            <i class="ureport ureport-open"></i> <span>选择</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form v-else-if="formData.type==='jdbc'" ref="form" :model="formData" label-width="120px">
      <el-form-item label="数据源名称：">
        <el-input v-model="formData.name" class="w-400"></el-input>
      </el-form-item>
      <el-form-item label="连接用户名：">
        <el-input v-model="formData.username" class="w-400"></el-input>
      </el-form-item>
      <el-form-item label="连接密码：">
        <el-input v-model="formData.password" class="w-400"></el-input>
      </el-form-item>
      <el-form-item label="驱动名称：">
        <el-select v-model="formData.driver" placeholder="请选择驱动名称" class="w-400">
          <el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="连接URL：">
        <el-input v-model="formData.url" class="w-400"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <div class="tip-item">sqlserver写法：jdbc:sqlserver://ip:1433;databasename=数据库名</div>
        <div class="tip-item">mysql写法：jdbc:mysql://ip:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC</div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">取 消</el-button>
      <el-button v-if="formData.type==='jdbc'" :loading="isLoading" type="primary" icon="el-icon-yrt-icon2" @click="test">测试</el-button>
      <el-button v-if="formData.type==='jdbc'" :loading="isLoading" type="primary" icon="el-icon-yrt-baocun" @click="save">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLoading: false,
      datasources: [],
      datasource: null,
      formData: {
        type: "jdbc",
        name: "wms",
        username: "wms_dev",
        password: "wms@123qaz",
        driver: "com.microsoft.sqlserver.jdbc.SQLServerDriver",
        url: "jdbc:sqlserver://116.62.202.26:1433;databasename=YrtWMS_SaaS_Dev"
      },
      sourceList: ["oracle.jdbc.OracleDriver", "com.ibm.db2.jcc.DB2Driver", "com.microsoft.sqlserver.jdbc.SQLServerDriver", "com.mysql.jdbc.Driver"]
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {},
  methods: {
    // 打开时加载文件列表
    dialogOpened () {
      this.getDatasources();
    },
    test () {
      this.testConnection(false);
    },
    // 获取内建数据源列表
    getDatasources () {
      const url = "/datasource/loadBuildinDatasources";
      const data = {};
      this.designer.ajax(url, data, res => {
        if (res.code !== 200) {
          this.$message.error("获取数据源失败！");
          return;
        }
        this.datasources = res.data.map(m => {
          return {
            name: m
          };
        });
      });
    },
    save () {
      if (this.formData.type === "jdbc") {
        this.testConnection(true);
      } else if (this.formData.type === "buildin") {
        this.saveBuildin();
      }
    },
    // jdbc测试、保存
    testConnection (isSave) {
      const { context } = this.designer;
      const { name, username, password, driver, url } = this.formData;
      const reportDef = context.reportDef;
      if (!reportDef.datasources) {
        reportDef.datasources = [];
      }
      const datasources = reportDef.datasources;

      if (!name) {
        this.$message.error(`请输入数据源名称`);
        return;
      }
      if (!username) {
        this.$message.error(`请输入连接用户名`);
        return;
      }
      if (!driver) {
        this.$message.error(`请输入连接驱动`);
        return;
      }
      if (!url) {
        this.$message.error(`请输入连接URL`);
        return;
      }
      const datasource = datasources.find(item => item.name === name);
      if (datasource) {
        this.datasource = datasource;
      }
      const ajaxUrl = "/datasource/testConnection";
      const data = { username, password, driver, url };
      this.designer.ajax(ajaxUrl, data, res => {
        const data = res.data;
        if (isSave) {
          if (data.result) {
            if (!this.datasource) {
              datasources.push({
                type: "jdbc",
                name,
                username,
                password,
                driver,
                url,
                datasets: []
              });
            } else {
              this.datasource.name = this.formData.name;
              this.datasource.username = this.formData.username;
              this.datasource.password = this.formData.password;
              this.datasource.driver = this.formData.driver;
              this.datasource.url = this.formData.url;
            }
            this.$message.success(`保存成功！`);
            this.currentDialogVisible = false;
            this.$emit("on-datasource-success");
          } else {
            this.$message.error(`连接测试失败：` + data.error);
          }
        } else {
          if (data.result) {
            this.$message.success(`连接测试成功！`);
          } else {
            this.$message.error(`连接测试失败：` + data.error);
          }
        }
      });
    },
    // 内建数据源保存
    saveBuildin ({ name }) {
      const { context } = this.designer;
      const reportDef = context.reportDef;
      if (!reportDef.datasources) {
        reportDef.datasources = [];
      }
      const datasources = reportDef.datasources;
      const datasource = datasources.find(item => item.name === name);
      if (datasource) {
        this.datasource = datasource;
      }
      if (!this.datasource) {
        datasources.push({
          type: "buildin",
          name,
          datasets: []
        });
      } else {
        this.datasource.name = this.formData.name;
        this.datasource.username = this.formData.username;
        this.datasource.password = this.formData.password;
        this.datasource.driver = this.formData.driver;
        this.datasource.url = this.formData.url;
      }
      this.$message.success(`保存成功！`);
      this.currentDialogVisible = false;
      this.$emit("on-datasource-success");
    },
    init (datasource, type) {
      this.formData.type = type;
      if (datasource) {
        this.datasource = datasource;
        this.formData.name = datasource.name;
        if (datasource.type === "jdbc") {
          this.formData.username = datasource.username;
          this.formData.password = datasource.password;
          this.formData.driver = datasource.driver;
          this.formData.url = datasource.url;
        }
      } else {
        this.datasource = null;
        this.formData.name = null;
        this.formData.username = null;
        this.formData.password = null;
        this.formData.driver = null;
        this.formData.url = null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 0;
  .tip-item {
    line-height: 28px;
    color: darkgrey;
  }
}
</style>
